<template>
  <div class="app-container customer-div">
    <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="all">全部</el-menu-item>
      <el-menu-item index="waitFinanceCheck" v-if="purchaseOrderPayCheck">待财务会计审核</el-menu-item>
      <el-menu-item index="waitFinanceManagerCheck" v-if="purchaseOrderPayFinancialManagerCheck">待财务经理审核</el-menu-item>
      <el-menu-item index="waitPay">待付款</el-menu-item>
      <el-menu-item index="payList">付款记录</el-menu-item>
    </el-menu>
    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px" v-if="tab!='payList'">
        <el-form-item label="采购订单号：">
          <el-input v-model="listQuery.orderSn"></el-input>
        </el-form-item>
        <el-form-item label="供应商：">
          <el-select
            clearable
            v-model="listQuery.supplierId"
            filterable
            reserve-keyword
            placeholder="请输入关键词"
            style="width: 270px;">
            <el-option
              v-for="item in options2"
              :key="item.supplierId"
              :label="item.supplierName"
              :value="item.supplierId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同公司：">
          <el-input v-model="listQuery.fromCompany"></el-input>
        </el-form-item>
        <el-form-item label="申请状态：" v-if="tab=='all'">
          <el-select v-model="listQuery.applyState" filterable placeholder="请选择" clearable>
            <el-option :key="0" label="待采购员审核" :value="0"></el-option>
            <el-option :key="10" label="作废" :value="10"></el-option>
            <el-option :key="20" label="待采购产品负责人审核" :value="20"></el-option>
            <el-option :key="23" label="待采购部门负责人确认" :value="23"></el-option>
            <el-option :key="30" label="待财务会计审核" :value="30"></el-option>
            <el-option :key="32" label="待财务经理审核" :value="32"></el-option>
            <!--              <el-option :key="35" label="待总经理确认" :value="35"></el-option>-->
            <el-option :key="40" label="待支付" :value="40"></el-option>
            <el-option :key="50" label="已支付" :value="50"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务员：" >
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable style="width:150px">
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.createTime"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="支付日期：" >
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.payTime"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="付款方式：" >
          <el-select v-model="listQuery.applyPaymentCode" class="input-width" style="width:150px" placeholder="请选择">
            <el-option value="cash" label="现汇" key="cash" ></el-option>
            <el-option value="chengdui" label="承兑" key="chengdui" ></el-option>
            <el-option value="cashBalance" label="现金余额" key="cashBalance" ></el-option>
            <el-option value="chengduiBalance" label="承兑余额" key="chengduiBalance" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型：" >
          <el-select v-model="listQuery.applyType" filterable placeholder="请选择" clearable style="width:150px">
            <el-option key="order_pay" label="采购单付款" value="order_pay"></el-option>
            <el-option key="advance_pay" label="供应商预付款" value="advance_pay"></el-option>
            <el-option key="order_refund" label="退款" value="order_refund"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款金额：">
          <el-input
            type="number"
            v-model="listQuery.applyPaymentAmount[0]"
            class="priceInput"
            style="width: 100px; margin-right: 5px"
          />-<el-input
          type="number"
          v-model="listQuery.applyPaymentAmount[1]"
          class="priceInput"
          ref="prodEnd"
          style="width: 100px; margin-left: 5px"
        />
        </el-form-item>
        <el-form-item label="付款紧急程度：" >
          <el-select v-model="listQuery.urgencyType" class="input-width" style="width:195px" placeholder="请选择"  clearable>
            <el-option value="紧急" label="紧急" key="紧急" ></el-option>
            <el-option value="普通" label="普通" key="普通" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
                  @click="handleSearchList()"
                  type="primary">
            查询
          </el-button>
          <el-button
                  v-if="exportPurchaseList && tab=='all'"
                  @click="downloadExcel()"
                  type="primary">
            导出
          </el-button>
        </el-form-item>
        <el-table :data="numList" border  v-if="tab == 'waitFinanceCheck' || tab == 'waitPay'">
          <el-table-column
            label="合同公司">
            <template slot-scope="scope">
              {{scope.row.fromCompany}}
            </template>
          </el-table-column>
          <el-table-column
            label="付款方式">
            <template slot-scope="scope">
              {{scope.row.applyPaymentCode | fifPaymentCode}}
            </template>
          </el-table-column>
          <el-table-column
            label="金额合计">
            <template slot-scope="scope">
              {{scope.row.num}}
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-form :inline="true" :model="listQuery2" size="mini" label-width="120px" v-if="tab=='payList'">
        <el-form-item label="采购订单号：">
          <el-input v-model="listQuery2.orderSn"></el-input>
        </el-form-item>
        <el-form-item label="供应商：">
          <el-select
                  clearable
                  v-model="listQuery2.supplierId"
                  filterable
                  reserve-keyword
                  placeholder="请输入关键词">
            <el-option
                    v-for="item in options2"
                    :key="item.supplierId"
                    :label="item.supplierName"
                    :value="item.supplierId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="侍款状态：" >
          <el-select v-model="listQuery2.payState" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in payStateList"
                    :key="item.val"
                    :label="item.label"
                    :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery2.createDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同公司：">
          <el-input v-model="listQuery2.fromCompany"></el-input>
        </el-form-item>
        <el-form-item label="合同状态：">
          <el-select v-model="listQuery2.orderState" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in stateList"
                    :key="item.val"
                    :label="item.label"
                    :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款日期：" >
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery2.payTime"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="业务员：">
          <el-select v-model="listQuery2.purchaseUserId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款金额：">
          <el-input
            type="number"
            v-model="listQuery2.applyPaymentAmount[0]"
            class="priceInput"
            style="width: 100px; margin-right: 5px"
          />-<el-input
          type="number"
          v-model="listQuery2.applyPaymentAmount[1]"
          class="priceInput"
          ref="prodEnd"
          style="width: 100px; margin-left: 5px"
        />
        </el-form-item>
        <el-form-item>
          <el-button
                  @click="handleSearchList()"
                  type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container" v-if="tab != 'payList'">
      <el-table
              :header-cell-style="{'text-align':'center'}"
              :row-style="setRowStyle"
              v-loading="listLoading"
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column
                label="供应商名称"
                width="200">
          <template slot-scope="scope">
            {{scope.row.supplierName}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="类型"
                width="100">
          <template slot-scope="scope">
            {{scope.row.applyType | fifType}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="合同公司"
                width="100">
          <template slot-scope="scope">
            {{scope.row.fromCompany}}
          </template>
        </el-table-column>
        <el-table-column
                label="业务员"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="付款方式"
                width="100">
          <template slot-scope="scope">
            {{scope.row.thisPaymentCode | fifPaymentCode}}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="紧急程度"
          width="100">
          <template slot-scope="scope">
            {{scope.row.urgencyType }}
          </template>
        </el-table-column>

        <el-table-column  label="采购单号" width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.orderSn}}
          </template>
        </el-table-column>

        <el-table-column
                label="合同数量"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.goodsAllNum}}
          </template>
        </el-table-column>
        <el-table-column
                label="合同金额"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.orderAmount}}
          </template>
        </el-table-column>

        <el-table-column
                align="center"
                label="已付款"
                width="100">
          <template slot-scope="scope">
            {{scope.row.hasPaidAmount}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="未付款"
                width="100">
          <template slot-scope="scope">
            {{scope.row.unPaidAmount}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="申请付款金额"
                width="100">
          <template slot-scope="scope">
            {{scope.row.thisPayAmount}}
          </template>
        </el-table-column>

        <el-table-column
                align="center"
                label="入库数量"
                width="100">
          <template slot-scope="scope">
            {{scope.row.goodsInNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="未入库数量"
                width="100">
          <template slot-scope="scope">
            {{scope.row.goodsUnInNum}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="入库金额"
                width="100">
          <template slot-scope="scope">
            {{scope.row.goodsInAmount}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="未入库金额"
                width="100">
          <template slot-scope="scope">
               {{scope.row.goodsUnInAmount}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="承兑余额"
                width="100">
          <template slot-scope="scope">
            {{scope.row.chengduiBalance}}
          </template>
        </el-table-column>

        <el-table-column
                align="center"
                label="现金余额"
                width="100">
          <template slot-scope="scope">
            {{scope.row.cashBalance}}
          </template>
        </el-table-column>

        <el-table-column
                align="center"
                label="申请付款时间"
                width="100">
          <template slot-scope="scope">
            {{scope.row.thisPayTime}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="申请付款备注"
                width="200">
          <template slot-scope="scope">
            {{scope.row.thisPayRemark}}
          </template>
        </el-table-column>
        <el-table-column  label="申请时间" width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.applyCreateTime}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="实付金额"
                width="100">
          <template slot-scope="scope">
            {{scope.row.actualPayAmount}}
          </template>
        </el-table-column>

        <el-table-column
                align="center"
                label="付款时间"
                width="150">
          <template slot-scope="scope">
            {{scope.row.actualPayTime}}
          </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                align="center"
                label="申请状态"
                width="100">
          <template slot-scope="scope">
            {{scope.row.applyState | fifApplyState}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="打印次数"
          width="100">
          <template slot-scope="scope">
            {{scope.row.hasPrintNum}}
          </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="100">
          <template slot-scope="scope">
              <el-button type="text" @click="toInfo(scope.row)">查看</el-button>
              <el-button type="text" v-if="scope.row.applyState == 40 "  @click="showSendFrom(scope.row)">付款</el-button>
              <el-button type="text" v-if="scope.row.applyState == 50 " @click="seeCalPay(scope.row)">取消</el-button>
              <el-button type="text"  @click="showPrint(scope.row)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" >
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20]"
                :total="count">
        </el-pagination>
      </div>
    </div>

    <!--付款记录列表-->
    <div class="table-container" v-if="tab == 'payList'">
      <el-table
              :header-cell-style="{'text-align':'center'}"
              v-loading="listLoading"
              :data="tableData2"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column  label="采购单号" width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.orderSn}}
          </template>
        </el-table-column>
        <el-table-column
                label="合同金额"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.orderAmount}}
          </template>
        </el-table-column>
        <el-table-column
                label="供应商名称"
                width="200">
          <template slot-scope="scope">
            {{scope.row.supplierName}}
          </template>
        </el-table-column>
        <el-table-column
                label="合同公司"
                width="200"
                align="center">
          <template slot-scope="scope">
            {{scope.row.fromCompany}}
          </template>
        </el-table-column>
        <el-table-column
                label="本次付款金额"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.payAmount}}
          </template>
        </el-table-column>
        <el-table-column
                label="付款方式"
                width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.paymentCode | fifPaymentCode}}
          </template>
        </el-table-column>
        <el-table-column
                label="付款备注"
                width="200"
                align="center">
          <template slot-scope="scope">
            {{scope.row.payRemark}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="付款时间"
                width="150">
          <template slot-scope="scope">
            {{scope.row.payTime}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="付款人"
                width="100">
          <template slot-scope="scope">
            {{scope.row.payUser}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="状态"
                width="100">
          <template slot-scope="scope">
            {{scope.row.isCancel == 0 ? '正常' : '已取消'}}
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="操作"
                width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="showSeeForm(scope.row)">查看</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-container" >
        <el-pagination
                background
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery2.pageNum"
                :page-size="listQuery2.pageSize"
                :page-sizes="[10,15,20]"
                :total="count2">
        </el-pagination>
      </div>
    </div>


    <!--付款弹窗-->
    <el-dialog
            :close-on-click-modal="false"
            :beforeClose="handleClose"
            title="确认付款"
            :visible.sync="dialogVisible"
            width="700px">
      <el-form :model="sendForm" size="mini" label-width="120px" ref="sendForm" :rules="rules">
        <el-form-item label="供应商：" >
            {{sendForm.supplierName}}
        </el-form-item>
        <el-form-item label="收款单位类型：" >
          {{sendForm.paymentUnitType}}
        </el-form-item>
        <el-form-item label="采购合同金额：" >
            {{sendForm.orderAmount}}
        </el-form-item>
        <el-form-item label="付款公司：" >
          {{sendForm.fromCompany}}
        </el-form-item>
        <el-form-item label="付款用途：" >
          {{sendForm.receivePurpose}}
        </el-form-item>
        <el-form-item label="申请金额：" >
          {{sendForm.thisPayAmount}}
        </el-form-item>
        <el-form-item label="付款方式：" prop="paymentCode">
          <el-radio-group v-model="sendForm.paymentCode" @change="changepayType">
            <el-radio label="chengdui">承兑</el-radio>
            <el-radio label="cash">现金汇款</el-radio>
            <el-radio label="weixin">微信</el-radio>
            <el-radio label="alipay">支付宝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="付款金额：" prop="payAmount">
          <el-input-number v-model="sendForm.payAmount" :disabled="sendForm.paymentCode == 'chengdui'" :precision="2" :min="0" :max="Number((sendForm.thisPayAmount-sendForm.balance).toFixed(2))" style="width:150px;display: inline-block"></el-input-number>
        </el-form-item>
        <el-form-item label="余额：" prop="balance">
          <el-input-number v-model="sendForm.balance" :precision="2" :min="0" :max="Number((sendForm.thisPayAmount-sendForm.payAmount).toFixed(2))" style="width:130px;display: inline-block"></el-input-number>
          <span style="font-size:12px;padding-left:10px;color:red">余额与付款金额之和不能超过申请金额</span>
        </el-form-item>

        <el-form-item label="付款银行帐号：" prop="FName" v-if="sendForm.paymentCode != 'chengdui'" key="FName">
          <el-select clearable v-model="sendForm.FName" style="width:400px">
            <el-option v-for="(item,index) in brandList" :key="item.FName" :value="item.FName" :label="item.FName+'【'+item.FNumber+'】'"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="应收票据背书：" prop="document" v-if="sendForm.paymentCode == 'chengdui'" key="document">-->
<!--          <el-select multiple filterable v-model="sendForm.document" style="width:100%">-->
<!--            <el-option v-for="item in billNoList" :key="item.billNo" :value="item.billNo" :label="'收票日期：'+item.billDate+'，金额：'+item.billAmount+'，票据号：'+item.billNo+'，票据包号：'+item.billNumber"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="付款凭证：" prop="payPics">
          <div style="width: 100%;height: 150px; border:1px solid #DCDFE6;cursor: default;border-radius: 4px;">
            <div v-for="(item,index) in sendForm.payPics" style="display: inline-block;margin-right:5px;width:100px;height:100px;position: relative">
               <img :src="item" style="width:100px;height:100px;object-fit: contain;border:0">
               <i class="el-icon-error" style="position: absolute;right:-10px;top:0;cursor: pointer;font-size:20px;color:red" @click="delImg(index)"></i>
            </div>
          </div>
        </el-form-item>

<!--        <el-form-item label="SAP付款码：" prop="kingPayNumber">-->
<!--          <el-input  v-model="sendForm.kingPayNumber" style="width:150px"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="备注信息：">
          <el-input type="textarea" v-model="sendForm.payRemark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading" :disabled="btnLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!--审核弹窗-->
    <el-dialog
            :close-on-click-modal="false"
            :beforeClose="handleClose2"
            title="财务审核"
            :visible.sync="dialogVisible2"
            width="500px">
      <el-form :model="passForm" size="mini" label-width="100px" ref="passForm" :rules="rules2">
        <el-form-item label="供应商：" >
          {{passForm.supplierName}}
        </el-form-item>
        <el-form-item label="付款公司：" >
          {{passForm.fromCompany}}
        </el-form-item>
        <el-form-item label="付款金额：" >
          {{passForm.payAmount}}
        </el-form-item>

        <el-form-item label="付款备注：">
          {{passForm.payOtherRemark}}
        </el-form-item>
        <el-form-item label="备注信息(审核不通过必填)：" label-width="180px">
          <el-input type="textarea" v-model="passForm.remark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleConfirm2(2)">审核不通过</el-button>
          <el-button type="primary" @click="handleConfirm2(1)" :loading="btnLoading2">审核通过</el-button>
      </span>
    </el-dialog>


    <!--查看付款弹窗-->
    <el-dialog
            :close-on-click-modal="false"
            :beforeClose="handleClose3"
            title="付款详情"
            :visible.sync="dialogVisible3"
            width="500px">
      <el-form :model="seeForm" size="mini" label-width="120px" ref="seeForm" >
        <el-form-item label="供应商：" >
          {{seeForm.supplierName}}
        </el-form-item>
        <el-form-item label="付款公司：" >
          {{seeForm.fromCompany}}
        </el-form-item>
        <el-form-item label="付款方式：" >
          {{seeForm.paymentCode | fifPaymentCode}}
        </el-form-item>
        <el-form-item label="付款凭证：" >
          <img :src="item" style="width:100%;height:150px;object-fit: contain;border:0" v-for="item in seeForm.payPics" @click="fullImg(item)"/>
        </el-form-item>
        <el-form-item label="付款金额：" >
          {{seeForm.payAmount}}
        </el-form-item>
        <el-form-item label="付款银行帐号：">
          {{seeForm.paymentAccountName}}<span v-if="seeForm.paymentAccountNo != ''">【{{seeForm.paymentAccountNo}}】</span>
        </el-form-item>

        <el-form-item label="付款备注：">
          {{seeForm.payRemark}}
        </el-form-item>
        <el-form-item label="状态：" v-if="seeForm.isCancel == 1">
             已取消
        </el-form-item>
        <el-form-item label="取消原因：" v-if="seeForm.isCancel == 1">
          {{seeForm.cancelRemark}}
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="seeForm.isCancel == 0">
          <el-button type="primary" @click="seeCalPay(seeForm)">取消付款</el-button>
      </span>
    </el-dialog>

    <!--取消付款弹窗-->
    <el-dialog
            :close-on-click-modal="false"
            :beforeClose="handleClose4"
            title="取消付款"
            :visible.sync="dialogVisible4"
            width="500px">
      <div style="font-size:14px;padding-bottom:40px;">确认取消此条付款记录！</div>
      <el-form :model="cancelForm" size="mini" label-width="100px" ref="cancelForm" :rules="rules4">
        <el-form-item label="取消原因：" prop="cancelRemark">
          <el-input type="textarea" v-model="cancelForm.cancelRemark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose4">取 消</el-button>
          <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4">确 定</el-button>
      </span>
    </el-dialog>


    <!--放大图片-->
    <el-dialog
            :visible.sync="dialogVisible5"
            width="800">
      <img :src="cutImg" style="width:100%"/>
    </el-dialog>

    <!--打印弹窗-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="closePrint"
      :visible.sync="dialogVisible6"
      width="900px">
      <div id="print-div" style="height:100%;background: #fff" v-loading="ploading">
        <div class="title">{{orderInfo.fromCompany}}采购付款单</div>
        <div class="paper-top">
          <table border="0" cellpadding="0" cellspacing="0" style="width:100%" class="pring-table">
            <tr>
              <td style=" white-space:nowrap;width:100px;" valign="top">收款单位：</td>
              <td valign="top">{{orderInfo.supplierName}}</td>
              <td style=" white-space:nowrap;width:100px;" valign="top">申请付款日期：</td>
              <td valign="top" style=" white-space:nowrap;">{{orderInfo.applyPayTime}}</td>
            </tr>
            <tr>
              <td style=" white-space:nowrap;width:100px;" valign="top">品名型号:</td>
              <td style="padding-right:20px;width:60%" valign="top">
                <div style="max-width:100%">
                  <div v-for="item in orderInfo.ordGoodsList" >{{item.goodsName}}{{item.goodsSn}} / {{item.goodsNum}}吨 / ￥{{item.goodsPrice}}</div>
                </div>

              </td>
              <td style=" white-space:nowrap;width:100px;" valign="top">申请付款金额：</td>
              <td valign="top" style=" white-space:nowrap;">{{orderInfo.applyPayAmount | toThousands}}</td>
            </tr>
            <tr>
              <td style=" white-space:nowrap;width:100px;" valign="top">采购日期：</td>
              <td valign="top">{{orderInfo.createTime}}</td>
              <td style=" white-space:nowrap;width:100px;" valign="top">合同编号：</td>
              <td valign="top" style=" white-space:nowrap;">{{orderInfo.orderSn}}</td>
            </tr>
            <tr>
              <td style=" white-space:nowrap;width:100px;" valign="top">备注：</td>
              <td valign="top">{{orderInfo.actualPayRemark}}</td>
              <td style=" white-space:nowrap;width:100px;" valign="top">付款方式：</td>
              <td valign="top">{{orderInfo.applyPaymentCode | fifPaymentCode}}({{orderInfo.urgencyType}})</td>
            </tr>

            <tr>
              <td style=" white-space:nowrap;width:100px;">经办人：</td>
              <td style=" white-space:nowrap;">{{orderInfo.userName}}</td>
              <td style=" white-space:nowrap;width:100px;">部门负责人：</td>
              <td></td>
            </tr>
          </table>
        </div>
        <div style="margin-top: 20px;clear: both">
          <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1">操作记录</el-menu-item>
          </el-menu>
        </div>
        <div style="margin-top:20px">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in orderInfo.processLogs"
              :key="index">
                         <span>
                             <span style="padding-right:10px;">{{activity.processTime}}</span>：{{activity.processContent}}
                             <span v-show="activity.processRemark && activity.processRemark != ''" style="color:red;padding-left:5px">备注：{{activity.processRemark}}</span>
                         </span>
            </el-timeline-item>
          </el-timeline>
          <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.processLogs && orderInfo.processLogs.length == 0">- 暂无数据 -</div>
        </div>

      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {postPurchasePay,getCustomerOption,getOrderUsersList,purchaseOrderList,supplierList,getPaylist,uploadBase64,postCancelPay,purchaseProcess,purchaseApplyPayList,orderRefund,getQiniuToken,applyPayInfoPurchase,purchaseUpdatePrintNum } from '@/api/partner'
  import {goodsList,bankAccountList,getPayReceipt} from '@/api/company'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'
  import {validateCommission} from '@/utils/validate';
  import {accounting} from "@/utils/accounting.js"
  import "@/utils/jQuery.print"
  const defaultListQuery2={
    pageNum: 1,
    pageSize: 10,
    supplierId: '',
    orderSn:'',
    purchaseUserId:'',
    fromCompany:'',
    createDate:null,
    tab:'all',
    orderState:null,
    payTime:null,
    payState:null,
    applyType:'',
    applyPaymentAmount:['','']
  };
  const defaultListQuery={
    "orderSn"     : "",    //采购单号
    "supplierId"  : "",     //供应商ID
    "createTime"  : '',  //申请时间
    "applyState"  : "", //申请状态
    "payTime" : '', //实际支付时间
    "userId" : '', //业务员ID
    "pageNum" : 1,
    "pageSize" : 10,
    applyType:'',
    fromCompany:'',
    applyPaymentAmount:['',''],
    urgencyType:''
  };
  const defaultSendForm = {
    sendForm:null,
    supplierName:null,
    fromCompany:null,
    paymentCode:'cash',
    payPics:[],
    payAmount:null,
    payRemark: null,
    kingPayNumber:null,
    FName:'',
    receivePurpose:'',
    paymentUnitType:'',
    orderAmount:'',
    thisPayAmount:'',
    balance:0
    };
  const defaultPassForm = {
    orderId:null,
    supplierName:null,
    fromCompany:null,
    payAmount:null,
    payOtherRemark:'',
    remark: null,
  };

  const defaultSeeForm = {
    payId:null,
    supplierName:null,
    fromCompany:null,
    payAmount:null,
    payRemark: null,
    payPics:[],
    cancelRemark:'',
    isCancel:null,
    paymentCode:'',
    paymentAccountName:'',
    paymentAccountNo:'',
  };

  const defaultCancelForm = {
    payId:null,
    cancelRemark:null,
  };



  export default {
    name: "index",
    data(){
      const validatePayAmount = (rule, value, callback) => {
        let sum = Number((this.sendForm.payAmount+this.sendForm.balance).toFixed(2))
        if(!value && value !=0){
          callback(new Error('此项必填'))
        }else if(sum > this.sendForm.thisPayAmount){
          callback(new Error('付款金额与余额之和大于申请金额'))
        }else if(sum <= 0){
          callback(new Error('付款金额与余额之和需大于0'))
        }else {
          callback()
        }
      };

      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
        tableData: [],
        tableData2:[],
        count: 0,
        listLoading: false,
        userOptionList:[],
        roles:store.getters.roles ? store.getters.roles : [],
        loading:false,
        options:[],
        loading2:false,
        options2:[],
        stateList:[
          {label:'待采购员审核',val:0},
          {label:'作废',val:10},
          {label:'待产品负责人审核',val:20},
          {label:'待采购部门负责人确认',val:23},
          {label:'待总经理审核',val:25},
          {label:'流程结束',val:40},
          {label:'交易关闭',val:50},
        ],
        payStateList:[
          {label:'未付款',val:0},
          {label:'部分付款',val:1},
          {label:'已付款',val:2},
        ],
        dialogVisible:false,
        btnLoading:false,
        sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
        rules:{
          paymentCode:[{required: true, trigger: 'change' ,message: '请选择付款方式',}],
          payPics:[{required: true, trigger: 'change' ,message: '请上传付款凭证',}],
          payAmount:[{required: true, trigger: 'blur' ,validator: validatePayAmount,}],
          kingPayNumber:[{required: true, trigger: 'blur' ,message: '请输入金蝶付款码',}],
          FName:[{required: true, trigger: 'change' ,message: '此项必填'}],
          balance:[{required: true, trigger: 'blur' ,validator: validatePayAmount,}],
        },
        upUrl:'',
        dialogVisible2:false,
        btnLoading2:false,
        passForm:JSON.parse(JSON.stringify(defaultPassForm)),
        rules2:{},

        dialogVisible3:false,
        btnLoading3:false,
        seeForm:JSON.parse(JSON.stringify(defaultSeeForm)),
        rules3:{},

        dialogVisible4:false,
        btnLoading4:false,
        cancelForm:JSON.parse(JSON.stringify(defaultCancelForm)),
        rules4:{
          cancelRemark:[{required: true, trigger: 'blur' ,message: '请输入取消原因',}],
        },
        tab:'all',
        count2:0,
        dialogVisible5:false,
        cutImg:'',

        uploadToken:{
          token:'',
        },
        imgDomain:'',
        numList:[],
        dialogVisible6:false,
        orderInfo:{},
        ploading:false,
        applyId:'',
        brandList:[],
        billNoList:[]
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId',
        'isMange',
      ]),
      purchaseOrderPayCheck(){
        if(this.roles.indexOf("purchaseOrderPayCheck") != -1){
          return true
        }else{
          return false
        }
      },
      exportPurchaseList(){
        if(this.roles.indexOf("exportPurchaseList") != -1){
          return true
        }else{
          return false
        }
      },
      purchaseOrderPayFinancialManagerCheck(){
        if(this.roles.indexOf("purchaseOrderPayFinancialManagerCheck") != -1){
          return true
        }else{
          return false
        }
      },
    },
    watch:{
      upUrl(){
        let data = {};
        let pic = this.upUrl.replace(/^.*?base64,/, '');
        data.pic = pic;
        data.token = this.uploadToken.token;
        data.imgDomain = this.imgDomain;
        uploadBase64(data).then((res)=>{
            console.log("this.sendForm",this.sendForm)
            console.log("res",res)
            if(res.src){
              this.sendForm.payPics.push(res.src) ;
            }else{
              this.$message.error('上传失败')
            }
          console.log("this.sendForm2",this.sendForm)
        }).catch(()=>{

        });
      },
    },
    created() {
      if(this.$route.query.orderSn){
        this.listQuery.orderSn = this.$route.query.orderSn;
      }
      this.getUploadToken();
      this.getList();
      this.getUserOptionList();
      this.getSupplierList();
      this.pasteImage();
    },
    filters: {
      toThousands(num){
        return  accounting.formatMoney(num,"")
      },
      fifType(val){
        if(val == 'advance_pay'){
          return '预付款'
        }else if(val == 'order_pay'){
          return '采购付款'
        }else if(val == 'order_refund'){
          return '退款'
        }
      },
      formatCreateTime(time) {
        if(time){
          let date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        }else{
          return '--'
        }
      },
      fiferPayState(val){
        if(val == 0){
          return '未付款'
        }else if(val == 1){
          return '部分付款'
        }else if(val == 2){
          return '已付款'
        }
      },
      fifApplyState(val){
        if(val == 0){
          return '待采购员审核'
        }else if(val == 10){
          return '作废'
        }else if(val == 20){
          return '待产品负责人审核'
        }else if(val == 23){
          return '待采购部门负责人确认'
        }else if(val == 30){
          return '待财务会计审核'
        }else if(val == 32){
          return '待财务经理审核'
        }else if(val == 35){
          return '待总经理确认'
        }else if(val == 40){
          return '待支付'
        }else if(val == 50){
          return '已支付'
        }
      },
      fifterState(val){
        if(val == 0){
          return '待采购员审核'
        }else if(val == 10){
          return '作废'
        }else if(val == 20){
          return '待产品负责人审核'
        }else if(val == 23){
          return '待采购部门负责人确认'
        }else if(val == 25){
          return '待总经理审核'
        }else if(val == 30){
          return '待财务负责人审核'
        }else if(val == 40){
          return '流程结束'
        }else if(val == 50){
          return '交易关闭'
        }
      },

      fifPaymentCode(val){
        if(val == 'chengdui'){
          return '承兑'
        }else if(val == 'cash'){
          return '现金汇款'
        }else if(val == 'weixin'){
          return '微信'
        }else if(val == 'alipay'){
          return '支付宝'
        }else if(val == 'balance'){
          return '余额'
        }
      },
    },
    methods:{
      setRowStyle({row, rowIndex}) {
        if (row.urgencyType === '紧急') {
          return { 'background-color': '#ffcaca' };
        } else {
          return {}; // 默认样式或留空返回空对象以使用默认样式
        }
      },
      getbillNoList(orderId){
        getPayReceipt({orderId:orderId}).then((res)=>{
          this.billNoList = res.list
        })
      },
      changepayType(){
        if(this.sendForm.paymentCode == 'chengdui'){
          this.sendForm.payAmount = 0
          this.sendForm.balance = this.sendForm.thisPayAmount
        }else{
          this.sendForm.payAmount = this.sendForm.thisPayAmount
          this.sendForm.balance = 0
        }
      },
      getBrandList(companyName){
        bankAccountList({companyName:companyName}).then((res)=>{
          this.brandList = res.list
        })
      },
      //关闭打印弹窗
      closePrint(){
        this.dialogVisible6 = false;
        this.getList()
      },
      //打印弹窗
      showPrint(item){
        this.dialogVisible6 = true;
        this.getPageInfo(item)
      },

      //获取合同详情
      getPageInfo(item){
        this.ploading = true;
        applyPayInfoPurchase({applyId:item.applyId}).then(res=>{
          this.orderInfo = res;
          this.applyId = item.applyId
          this.ploading = false;
        });
      },

      //打印
      printdiv(){
        purchaseUpdatePrintNum({applyId:this.applyId});
        $("#print-div").print({
          globalStyles:true,//是否包含父文档的样式，默认为true
          mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
          stylesheet:null,//外部样式表的URL地址，默认为null
          noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
          iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
          append:null,//将内容添加到打印内容的后面
          prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
          deferred: $.Deferred()//回调函数
        });
      },
      //获取七牛TOKEN
      getUploadToken(){
       return  getQiniuToken().then((res)=>{
          this.uploadToken.token = res.token;
          this.imgDomain = res.domain
        })
      },
        fullImg(item){
            this.dialogVisible5 = true;
            this.cutImg = item;
        },
     //下载excle
      downloadExcel(){
        let params = JSON.parse(JSON.stringify(this.listQuery));
        params.isExport = 1;
        this.btnloading = true;
        purchaseApplyPayList(params).then((res)=>{
          this.btnloading = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require('sheet/Export2Excel');
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          })
        }).catch(()=>{
          this.btnloading = false;
        })
      },

      //下载表格数据格式化
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },

      delImg(index){
        this.sendForm.payPics.splice(index,1)
      },
      //显示取消支付
      seeCalPay(item){
        this.dialogVisible4 = true;
        this.cancelForm.applyId = item.applyId;
        this.cancelForm.payId = item.payId;
        this.cancelForm.cancelRemark = '';
      },
      //关闭取消付款弹窗
      handleClose4(){
        this.dialogVisible4 = false;
        this.$refs.cancelForm.clearValidate();
      },

      //提交取消付款弹窗
      handleConfirm4(){
        this.$refs.cancelForm.validate((valid) => {
          if (valid) {
            this.btnLoading4 = true;
            let data = JSON.parse(JSON.stringify(this.cancelForm));
            postCancelPay(data).then(()=>{
              this.$message({
                message: '操作成功！',
                type: 'success'
              });
              this.btnLoading4 = false;
              this.handleClose4();
              this.handleClose3();
              this.getList();
            }).catch(()=>{
              this.btnLoading4 = false;
            })
          }
        })
      },
      //显示查看付款弹窗
      showSeeForm(item){
        this.dialogVisible3 = true;
        this.seeForm.supplierName = item.supplierName;
        this.seeForm.fromCompany = item.fromCompany;
        this.seeForm.payId = item.payId;
        this.seeForm.payAmount = item.payAmount;
        this.seeForm.payRemark = item.payRemark;
        this.seeForm.payPics = item.payPics;
        this.seeForm.cancelRemark = item.cancelRemark;
        this.seeForm.isCancel = item.isCancel;
        this.seeForm.paymentCode = item.paymentCode;
        this.seeForm.paymentAccountName = item.paymentAccountName;
        this.seeForm.paymentAccountNo = item.paymentAccountNo;
      },
      //关闭查看付款
      handleClose3(){
        this.dialogVisible3 = false;
      },



      //显示审核弹窗
      showPassFrom(item){
        this.dialogVisible2 = true;
        this.passForm.supplierName = item.supplierName;
        this.passForm.fromCompany = item.fromCompany;
        this.passForm.orderId = item.orderId;
        this.passForm.payAmount = item.orderAmount;
        this.passForm.payOtherRemark = item.payOtherRemark;
        this.passForm.remark = '';
      },
      //关闭审核弹窗
      handleClose2(){
        this.dialogVisible2 = false;
        this.$refs.passForm.clearValidate();
      },

      //提交审核弹窗
      handleConfirm2(type){
        if(type == 2 && this.passForm.remark == ''){
          this.$message.error('审核不通过时，备注必需填写！');
          return false
        }
        this.btnLoading2 = true;
        let data = {};
        data.orderId = this.passForm.orderId;
        data.action = type == 2 ? 'back' : 'financeCheck';
        data.remark = this.passForm.remark;
        purchaseProcess(data).then(()=>{
          this.btnLoading2 = false;
          this.handleClose2();
          this.getList();
        }).catch(()=>{
          this.btnLoading2 = false;
        })


      },
      //粘贴图片
      pasteImage() {
        let upUrl = ''
        document.addEventListener('paste',(event)=> {
          let isChrome = false;
          if (event.clipboardData || event.originalEvent) {
            //某些chrome版本使用的是event.originalEvent
            let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
            if(clipboardData.items){
              // for chrome
              let  items = clipboardData.items, len = items.length, blob = null;
              isChrome = true;
              for (let i = 0; i < len; i++) {
                if (items[i].type.indexOf("image") !== -1) {
                  //getAsFile() 此方法只是living standard firefox ie11 并不支持
                  blob = items[i].getAsFile();
                }
              }
              if(blob!==null){
                let blobUrl=URL.createObjectURL(blob);
                let reader = new FileReader();
                // base64码显示

                reader.onload =  (event)=> {
                  this.upUrl = event.target.result;
                };
                reader.readAsDataURL(blob);
              }
            }
          }
        });
      },
      //显示付款弹窗
      showSendFrom(item){
        this.getUploadToken().then(()=>{
          this.dialogVisible = true;
          this.sendForm.supplierName = item.supplierName;
          this.sendForm.fromCompany = item.fromCompany;
          this.sendForm.applyId = item.applyId;
          this.sendForm.paymentCode = item.thisPaymentCode;

          this.sendForm.orderAmount = item.orderAmount;
          this.sendForm.paymentUnitType = item.paymentUnitType
          this.sendForm.receivePurpose = item.receivePurpose
          this.sendForm.payRemark = '';
          this.sendForm.payPics = [];
          this.sendForm.FName = '';
          this.sendForm.thisPayAmount = item.thisPayAmount
          this.sendForm.paymentCode = 'cash'
          this.sendForm.payAmount = item.thisPayAmount;
          this.sendForm.balance = 0
          this.getbillNoList(item.orderId)
          this.getBrandList(item.fromCompany)
        })

      },
      //关闭付款弹窗
      handleClose(){
        this.dialogVisible = false;
        this.$refs.sendForm.clearValidate();
      },

      //提交付款弹窗
      handleConfirm(){
        this.$refs.sendForm.validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            let data = JSON.parse(JSON.stringify(this.sendForm));
            if(data.paymentCode == 'chengdui'){
              data.FName = ''
            }
            postPurchasePay(data).then(()=>{
              this.btnLoading = false;
              this.handleClose();
              this.getList();
            }).catch(()=>{
              this.btnLoading = false;
            })
          }
        })
      },
      //去详情页
      toInfo(item){
        let routeData = this.$router.resolve({name:'purchaseApplyInfo',query:{applyId:item.applyId,applyType:item.applyType}});
        window.open(routeData.href);
      },
      //商品
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          this.loading = false;
          goodsList({keywords:query}).then((res)=>{
            this.options = res.list;
          })
        } else {
          this.options = [];
        }
      },

      //供应商
      getSupplierList() {
        supplierList().then((res)=>{
          this.options2 = res;
        })
      },

      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList().then((res)=>{
          this.userOptionList = res;
        })
      },

      //选择员工名称
      handleSelectUserName(key,item){
        this.listQuery[key] = item.userId;
      },

      //客户名称输入匹配
      querySearch(queryString, cb){
        getCustomerOption({keywords:queryString}).then((res)=>{
          cb(res);
        })
      },

      //选择客户名称
      handleSelectCustomerName(item){
        this.listQuery.keywords = item.customerName
      },

      /**
       * 切换选择状态
       */
      handleSelect(key, keyPath){
        this.tab = key;
        if( key == 'all'){
          this.listQuery.applyState = null;
        }else if(key == 'waitFinanceCheck'){
          this.listQuery.applyState = 30;
        }else if(key == 'waitFinanceManagerCheck'){
          this.listQuery.applyState = 32;
        }else if(key == 'waitPay') {
          this.listQuery.applyState = 40;
        }else if(key == 'payList'){
          this.listQuery.applyState = null;
        }
        this.handleSearchList();
      },

      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSizeChange2(val){
        this.listQuery2.pageNum = 1;
        this.listQuery2.pageSize = val;
        this.getList();
      },
      handleCurrentChange2(val){
        this.listQuery2.pageNum = val;
        this.getList();
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      //获取订单列表
      getList() {

        let fn;
        let data = {};
        if(this.tab == 'payList'){
          fn = getPaylist;
          data = JSON.parse(JSON.stringify(this.listQuery2));
        }else{
          fn = purchaseApplyPayList;
          data = JSON.parse(JSON.stringify(this.listQuery));
          data.tab = this.tab;
        }
        if(data.applyPaymentAmount[0] === '' && data.applyPaymentAmount[1] === ''){
          data.applyPaymentAmount = [];
        }else if(data.applyPaymentAmount[0] === '' && data.applyPaymentAmount[1] !== ''){
          this.$message({
            message: '请输入起始付款金额',
            type: 'warning'
          });
          return false
        }else if(data.applyPaymentAmount[0] !== '' && data.applyPaymentAmount[1] === ''){
          this.$message({
            message: '请输入终止付款金额',
            type: 'warning'
          });
          return false
        }else if(data.applyPaymentAmount[0] >  data.applyPaymentAmount[1]){
          this.$message({
            message: '起始付款金额大于终止付款金额',
            type: 'warning'
          });
          return false
        }
        this.listLoading = true;
        fn(data).then(response => {
          if(this.tab == 'payList'){
            this.tableData2 = response.list;
            this.count2 = response.count;
          }else{
            this.tableData = response.list;
            this.count = response.count;
            this.numList = response.numList
          }
          this.count = response.count;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      },

    },
  }
</script>

<style scoped lang="scss">
#print-div{
  font-size:12px !important;
  font-family: "Microsoft YaHei";
  color:#000;
  .title{
    font-size:24px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
  }
  .paper-top{
    margin-top:20px;
    line-height: 30px !important;
  }
  .good-table{
    margin-top:20px;
    table{
      border-left:1px solid #000;
      border-bottom:1px solid #000;
      td,th{
        font-weight: normal;
        border-right:1px solid #000;
        border-top:1px solid #000;
        padding:5px 10px;
        line-height: 20px;
      }
    }
  }
  .paper-bottom{
    margin-top:10px;
    line-height: 20px;
  }
  .pring-table{
    border-top:1px solid #000;
    border-right:1px solid #000;
    td{
      border-bottom:1px solid #000;
      border-left:1px solid #000;
      padding:0 10px;
    }
  }
}
</style>
